<template>
	<el-upload class="el-upload__demo" drag accept=".xlsx, .xls" 
	     :limit="1"  ref="upload" action="#"  :http-request="impExcel">				
		<i class="iconfont icon-shangchuanexcel myicon"></i>
		<div class="el-upload__text">拖拽文件到这或 <em>点击上传</em></div>
		<template #tip>
			<div class="el-upload__tip">仅允许导入xls、xlsx格式文件。</div>
		</template>
	</el-upload>	
	<el-table v-show="showError" :data="errRows" stripe border >
		<el-table-column prop="rowNum" width="80" align="center" label="行号">
		</el-table-column>
		<el-table-column prop="errMsg" width="420"  align="center" label="错误信息">
		</el-table-column>
	</el-table>
	<el-button type="primary" @click="toElastic">数据导入到Elastic</el-button>	
</template>
<script>
	import { ElButton, ELUpload, ElMessageBox} from "element-plus"
	export default {
		data() {
			return {
				errRows: [],
				showError:false
			}
		},
		methods: {
			async impExcel(e){
				this.errRows=[];
				const formData = new FormData();
				formData.append("file",e.file)
				
				let result = await this.$axios({
					method:"post",
					url:"/teacher/impExcel",
					headers:{
						"content-type":"multipart/form-data"
					},
					data:formData
				});
				console.log(result.data);
				let {code,msg,count,data}=result.data;
				if(code==0){
					if(count>0){
						this.errRows=data;
						msg+=`，失败 ${count} 条`
						this.showError=true;
					}					
				}
				ElMessageBox.alert(msg, "提示");
			},
			async toElastic(){
				let result=await this.$axios("/elastic/toDoc");
				ElMessageBox.alert(result.data.msg, "提示");
			}
		}
	}
</script>
<style>
	.upload-demo{
		width:100%;
		height:500px;
	}
	.myicon{
		font-size:48px;
	}
</style>